$footer_text_color: #000
$footer_bg: #D6AFAF
$link_color: +darken($footer_bg, 20%)

h1
  font-size: 2em
  margin: 15px 0
h2
  font-size: 1em

#logo
  a
    color: #000
    text-decoration: none

    // Background stylesheet
    display: block
    // TODO: Very bad bad bad idea to hardcode assets, how can we reference an asset from sass ?
    background: url('WatchTower-58eff0713efffbc6054defddc879e0b1.jpg') no-repeat
    width: 390px
    height: 94px

    &:visited, &:hover
      text-decoration: none

  h1
    float: left
    margin-top: 30px
    margin-left: 180px

.clearfix
  clear: both

.back
  margin-bottom: 2em
  a
    background-color: #222
    -webkit-border-radius: 0.5em
    -moz-border-radius: 0.5em
    border-radius: 0.5em
    color: white
    padding: 0.5em
    text-decoration: none

    &:hover
      background-color: #444

a
  color: $link_color
  text-decoration: none

  &:hover, &:visited
    text-decoration: none

body
  background: #f7f7f7
  color: #000
  font-family: Arial, Helvetica, sans-serif

  #wrapper
    width: 960px
    margin: 0 auto

    #main
      border: 1px solid #cdcdcd
      -webkit-border-radius: 5px 5px 0 0
      -moz-border-radius: 5px 5px 0 0
      border-radius: 5px 5px 0 0
      padding: 10px
      min-height: 200px
      background: #fff

      .page
        padding: 40px 0 0

    #footer
      width: 960px
      text-align: center
      background: $footer_bg
      color: $footer_text_color
      padding: 5px 0
      font-size: 12px

      a
        color: $footer_text_color
        text-decoration: none

        &:visited, &:hover
          text-decoration: none